forum

home / developersection / forums / how to include jquery validation in a web page?

Ask Question
Utpal Vishwas

Student

I am Utpal Vishwas from Uttar Pradesh. Have completed my B. Tech. course from MNNIT campus Prayagraj in 2022. I have good knowledge of computer networking.

Follow
Can you answer this question?
Answer

1 Answers

Aryan Kumar

Aryan Kumar

11-May-2023

To include jQuery validation in a web page, you will need to:

  • Include the jQuery library. The jQuery library is a JavaScript library that provides a variety of useful functions, including form validation. To include the jQuery library in your HTML document, add the following code to the head of your document:

Code snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  • Create a form. The form is the element that will be validated. To create a form, add the following code to your HTML document:

Code snippet

<form id="myForm">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="Submit" />
</form>
  • Attach the jQuery validation plugin to the form. The jQuery validation plugin is a plugin that provides a variety of form validation functions. To attach the jQuery validation plugin to the form, add the following code to your JavaScript file:

Code snippet

$(document).ready(function() {
  $("#myForm").validate();
});
  • Define the validation rules. The validation rules are the rules that will be used to validate the form fields. To define the validation rules, add the following code to your JavaScript file:

Code snippet

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      username: {
        required: true
      },
      password: {
        required: true,
        minlength: 6
      }
    }
  });
});
  • Validate the form. The form can be validated by calling the validate() method on the form object. For example, the following code would validate the form:

Code snippet

$("#myForm").validate();

If the form is valid, the submit() method on the form object will be called. If the form is invalid, an error message will be displayed.

Here is an example of a complete HTML and JavaScript file that includes jQuery validation:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Validation Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form id="myForm">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" value="Submit" />
  </form>
  <script>
    $(document).ready(function() {
      $("#myForm").validate({
        rules: {
          username: {
            required: true
          },
          password: {
            required: true,
            minlength: 6
          }
        }
      });
    });
  </script>
</body>
</html>

This code will create a form with two fields, a username field and a password field. The form will be validated when the user clicks the submit button. If the form is valid, the submit button will be clicked and the form will be submitted. If the form is invalid, an error message will be displayed.

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy